<template>
  <el-dialog :title="titleName" :visible.sync="dialogVisible" custom-class="custom_dialog" :close-on-click-modal="false"
             :modal-append-to-body="false" width="40%" :before-close="onClose">

    <div class="editContent">
      <el-form ref="role" :model="role" label-width="100px" label-position="right">

        <el-form-item label="菜单权限" class="form-item" prop="roleNm">
          <el-tree
            :data="parentMenu"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="{children: 'children',label: 'menuName'}">
          </el-tree>
        </el-form-item>

      </el-form>
    </div>

    <div style="text-align: center">
      <el-button type="danger" @click="onClose" icon="el-icon-close">取消</el-button>
      <el-button type="primary" @click="onSubmit('role')" icon="el-icon-check">提交</el-button>
    </div>

  </el-dialog>
</template>

<script>
  import menuApi from '@/api/sysMenu'
  import roleApi from '@/api/sysRole'

  export default {
    name: 'permissions',
    data() {
      return {
        titleName: '',
        dialogVisible: false,
        role: {},
        menu: {},
        parentMenu: [],
        permissions: {}
      }
    },

    methods: {
      // 打开界面
      open(id) {
        this.titleName = '分配权限'
        this.dialogVisible = true
        this.getParentMenu()
        this.getPrimission(id)
        this.role.id = id
      },
      // 提交
      onSubmit() {
        var me = this
        me.permissions.roleId = me.role.id
        // 子节点
        const id = me.$refs.tree.getCheckedKeys()
        // 父节点
        const prantId = me.$refs.tree.getHalfCheckedKeys()
        // 子节点和父节点合并
        const menuList = id.concat(prantId)
        me.permissions.menuList = menuList
        roleApi.addPermissions(me.permissions).then(response => {
          if (response.status === 200) {
            me.onClose()
          } else {
            me.$message({ message: response.msg, type: 'error' })
          }
        }).catch(() => {
        })
      },

      // 查询菜单数据
      getParentMenu() {
        var me = this
        menuApi.getMenu(me.menu).then(response => {
          if (response.status === 200) {
            me.parentMenu = response.data
          } else {
            me.$message({ message: response.msg, type: 'error' })
          }
        }).catch(() => {
        })
      },
      // 回显菜单
      getPrimission(id) {
        roleApi.getPermissions({ roleId: id }).then(res => {
          if (res.status === 200) {
            if (res.data != null) {
              setTimeout(() => {
                res.data.forEach((item) => {
                  this.$refs.tree.setChecked(item, true, false)
                })
              }, 200)
            } else {
              this.$refs.tree.setCheckedKeys([])
            }
          }
        }).catch(() => {
        })
      },
      // 关闭/取消
      onClose() {
        // 清空表单
        this.$refs['role'].resetFields()
        this.menu = {}
        this.titleName = ''
        //清空校验数据
        this.$refs['role'].clearValidate()
        this.dialogVisible = false
        this.$emit('closeHide', false)
      }
    }
  }
</script>
